<template>
	<div class="content-display-limit">
		<van-nav-bar title="无视征信" :border='false' :safe-area-inset-top='true' />
		<div class="user-information">
			<img src="https://dkw-h5.oss-accelerate.aliyuncs.com/user-avatar.png" class="user-avatar">
			<span v-html="phone" class="user-phone"></span>
			<van-icon name="arrow" />
		</div>
		<span class="title">通过率排行榜</span>
		<van-pull-refresh @refresh="onRefresh" class="product_list_border_content_limit" success-text="刷新成功"
			v-model="isLoading">
			<ul class="product-list" v-if="productListData != 'empty'">
				<li v-for="(item, index) in productListData">
					<div @click="yjnq(item.id,item.title,1,item.url)">
						<span v-text="index + 1"></span>
						<div class="product-logo-content-border-limit">
							<van-image :src="item.icon" class="product-logo-content-limit" width="40px">
							</van-image>
						</div>
						<div class="product-message-content-limit">
							<div class="left-dispaly-limit">
								<span class="title" v-html="item.title"></span>
								<span class="describe" v-html="item.desc">
								</span>
							</div>
							<div class="right-dispaly-limit">
								<span class="price" v-html="'最高 ' + item.max_price"></span>
								<van-icon name="arrow" />
							</div>
						</div>
					</div>
				</li>
			</ul>
		</van-pull-refresh>
		<van-empty class="custom-image" image="../../../../static/images/index/index/product_empty.png"
			v-if="productListData == 'empty'">
		</van-empty>
		<van-tabbar v-model="active" class="oneBottomMenu" :fixed="true">
			<van-tabbar-item @click="showIndex">
				<span>贷款</span>
				<template #icon="props">
					<img :src="props.active ? icon.active : icon.inactive" />
				</template>
			</van-tabbar-item>
			<van-tabbar-item icon="setting-o">无视征信</van-tabbar-item>
		</van-tabbar>
	</div>
</template>
<script type="text/javascript">
	import Vue from 'vue';
	import Crypt from '@/aes.js';
	import {
		Image as VanImage,
		Toast,
		PullRefresh,
		Icon,
		Tabbar,
		TabbarItem,
		NavBar
	} from 'vant';
	Vue.use(VanImage);
	Vue.use(Toast);
	Vue.use(NavBar);
	Vue.use(PullRefresh);
	Vue.use(Icon);
	Vue.use(Tabbar);
	Vue.use(TabbarItem);
	export default {
		data() {
			return {
				phone: localStorage.getItem("phone"),
				productListData: 'empty',
				count: 0,
				active: 0,
				isLoading: false,
				deviceType: 1,
				icon: {
					active: 'https://img01.yzcdn.cn/vant/user-active.png',
					inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
				},
			}
		},
		mounted() {
			this.set_device();
			this.getProductData();
		},
		methods: {
			//判断设备
			set_device: function() {
				var u = navigator.userAgent,
					app = navigator.appVersion;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
				var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				if (isIOS) {
					this.deviceType = 2;
				}
			},
			getProductData() {
				var _this = this;
				Toast.loading({
					duration: 0,
					message: '产品数据获取中...',
				});
				var userId = localStorage.getItem('userId');
				_this.$axios.post('/advert.list?platform=3', {
						main_channel: 1,
						t: _this.$get_time(),
						app_version: '1.0',
						type: 1,
					})
					.then((res) => {

						//手动关闭上面的Loading
						Toast.clear();
						if (res.code == 200) {
							if (JSON.stringify(res.data) == '[]') {
								_this.productListData = 'empty';
							} else {
								_this.productListData = res.data;
							}
						}
					})
			},
			onRefresh() {
				setTimeout(() => {
					Toast('刷新成功');
					this.isLoading = false;
					this.count++;
				}, 1000);
			},
			showIndex() {
				window.location.href = '/#/index';
			},
			yjnq(id, title, type, url) {
				var _this = this,
					userId = localStorage.getItem('userId');
				var parameters = {
					id: id,
					user_id: userId,
					type: type,
					deviceType: _this.deviceType,
					title: title,
					url: url
				};

				window.location.href = '/#/info?type=2&parameters=' + Crypt.enc(JSON.stringify(parameters));
			}
		}
	}
</script>
<style type="text/css">
	html,
	body,
	#app,
	.content-display-limit {
		height: 100%;
	}

	.user-information {
		width: 90%;
		margin: 0 auto;
		text-align: left;
		line-height: 50px;
		height: 50px;
		margin-bottom: 20px;
		display: flex;
	}

	.user-avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		display: flex;
	}

	.user-phone {
		font-size: 14px;
		font-weight: bold;
		line-height: 50px;
		display: block;
		padding-left: 15px;
	}

	.user-information .van-icon {
		font-size: 12px;
		line-height: 50px;
		font-weight: bold;
		color: #f76f35;
		padding-left: 5px;
	}

	.oneBottomMenu {
		position: fixed;
	}

	.content-display-limit>.title {
		font-size: 14px;
		font-weight: bold;
		text-align: left;
		display: block;
		width: 90%;
		margin: 0 auto;
	}

	.product-list {
		margin-top: 20px;
	}

	.product-list>li {
		width: 90%;
		margin: 0 auto;
		border: 1px solid #eee;
		border-radius: 10px;
		margin-bottom: 10px;
	}

	.product-list>li>div>div {
		line-height: 40px;
		height: 40px;
	}

	.product-list>li>div {
		padding: 10px;
	}

	.product-list>li>div>span {
		line-height: 40px;
		height: 40px;
		font-size: 14px;
		font-weight: bold;
		padding-right: 10px;
	}

	.product-list>li>div,
	.product-message-content-limit {
		display: flex;
	}

	.product-message-content-limit {
		flex: 1;
	}

	.product-logo-content-border-limit {
		margin-right: 10px;
	}

	.product-message-content-limit .left-dispaly-limit {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.product-message-content-limit .left-dispaly-limit .describe {
		font-size: 12px;
		color: #9e9e9e;
		text-align: left;
	}

	.product-message-content-limit .left-dispaly-limit .title {
		padding-left: 0;
		font-size: 14px;
		font-weight: bold;
		text-align: left;
	}

	.product-message-content-limit .left-dispaly-limit .title,
	.product-message-content-limit .left-dispaly-limit .describe {
		line-height: 20px;
	}

	.right-dispaly-limit {
		font-size: 12px;
		color: #f76f35;
		display: flex;
	}

	.right-dispaly-limit>.price {
		display: block;
		line-height: 40px;
	}

	.right-dispaly-limit>.van-icon {
		line-height: 40px;
		padding-left: 5px;
		font-weight: bold;
		color: #9e9e9e;
	}
</style>
